<style>
    .hd img {
        width: 100%;
        vertical-align: middle
    }


    .side1 {
        position: absolute;
        right: 0px;
        margin-top: 6.85rem;
        width: 1.792rem;
        height: 5.184rem;
        background: url(../../images/hd/ranking/guize2.png) no-repeat center;
        background-size: 100%;
        display: inline-block
    }

    .side2 {
        position: absolute;
        right: 0px;
        margin-top: 6.85rem;
        width: 1.792rem;
        height: 5.184rem;
        background: url(../../images/hd/ranking/guize.png) no-repeat center;
        background-size: 100%;
        display: inline-block
    }

    .hd>p,
    .time,
    .p2,
    .endtime {
        position: absolute;
        z-index: 999
    }

    .time {
        margin-top: -2.45rem;
        font-size: 0.54rem;
        width: 15.3813rem;
        /* height: 2.9867rem; */
        padding-left: 0.6187rem;
        /* line-height: 2.1rem */
    }

    .time span {
        color: #fac96a;
        display: inline-block;
        font-size: 0.8107rem;
        position: relative;
        top: 1px;
    }

    .time p {
        margin-left: 6.3rem;
        /* line-height: 1; */
        margin-top: 1rem;
        vertical-align: bottom;
        font-size: 0.4693rem;
        color: #fff;
    }

    /* .endtime {
        margin-top: -2.25rem;
        font-size: 0.54rem;
        background: url(../../images/hd/ranking/btn1.png) no-repeat center;
        background-size: 95%;
        width: 15.3813rem;
        height: 2.9867rem;
        padding-left: 0.6187rem;
        line-height: 2.1rem
    } */

    .p2 {
        margin-top: 1.9rem;
        width: 100%;
        color: #fff;
        vertical-align: middle;
        text-align: center;
        font-size: 0.768rem;

    }

    .p2 span {
        font-size: 1.024rem;
        color: #fbecb3;
        display: inline-block;
        font-weight: bold
    }

    .prize {
        width: 8rem;
        height: 11.15735rem;
        line-height: 1;
        position: relative;
        background:url(https://file.youlijinfu.com/images/hd/ranking/ranking_all.jpg) no-repeat; 
        background-size: 16rem 55.7867rem
    }
    .prize:nth-child(1){
        background-position: 0rem 0rem;
    }
    .prize:nth-child(2){
        background-position: -8rem 0rem;
    }
    .prize:nth-child(3){
        background-position: 0rem -11.15735rem;
    }
    .prize:nth-child(4){
        background-position: -8rem -11.15735rem;
    }
    .prize:nth-child(5){
        background-position: 0rem -22.31468rem;
    }
    .prize:nth-child(6){
        background-position: -8rem -22.31468rem;
    }
    .prize:nth-child(7){
        background-position: 0rem -33.47203rem;
    }
    .prize:nth-child(8){
        background-position: -8rem -33.47203rem;
    }
    .prize:nth-child(9){
        background-position: 0rem -44.618rem;
    }
    .prize:nth-child(10){
        background-position: -8rem -44.618rem;
    }
    .prize p {
        margin-left: 2.88rem;
    }

    .prize_top {
        margin-top: 8.17rem;
        color: #383838;
        font-size: 0.4267rem;
    }

    .prize_center {
        font-size: 0.4267rem;
        margin-bottom: 0.8rem;
        margin-top: 0.18rem;
    }

    .prize_false {
        color: #ee034c;
        font-size: 0.768rem;
        margin-bottom: 0.88rem;
        position: absolute;
        bottom: 0.69rem
    }

    .prize_center span {
        color: #ee034c;
        font-size: 0.768rem;
        display: inline-block;
        position: relative;
        top: 1px;
    }

    .prize_bottom {
        color: #7e2801;
        font-size: 0.3947rem;
        margin-left: 3.3rem !important;
        position: absolute;
        bottom:0.56rem
    }

    .prize:nth-child(2n) p {
        margin-left: 2.48rem;
    }

    .prize:nth-child(2n) .prize_bottom {
        margin-left: 2.88rem !important;
        ;
    }

    .expect {
        margin-left: 3.45rem !important;
    }

    .prize:nth-child(2n) .expect {
        margin-left: 3.1rem !important;
    }

    .goprevious {
        position: relative;
        bottom:2.7733rem;
        text-align: center;
    }

    .goprevious span {
        display: inline-block;
        background: url(../../images/hd/ranking/previous.png) no-repeat center;
        background-size: 100%;
        height: 1.3653rem;
        width: 6.5067rem;
    }

    .pos_bot {
        position: fixed;
        bottom: 0px;
        z-index: 100;
        width: 100%;
    }

    .pos_bot img {
        width: 100%;
        vertical-align: middle
    }
</style>

<body>
    <div ng-include="'html/shared/_baseheader.html'"></div>
    <section id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span>
                <span class="pullDownLabel"></span>
            </div>
            <div class="hd">
                <div>
                    <img src="../../images/hd/ranking/ranking{{serial}}.jpg" alt="">
                    <div class="time" ng-if="hdtime">
                        <p>
                            <span ng-bind="begindjsdate">xx</span>天
                            <span ng-bind="begindjshousr">xx</span>时
                            <span ng-bind="begindjsmin">xx</span>分
                            <span style="width:1.1rem" ng-bind="begindjssec">xx</span>秒
                        </p>
                    </div>
                    <!-- <div ng-if="!hdtime" class="endtime">

                    </div> -->
                </div>
                <div>
                    <p class="p2">
                        我的投资:&nbsp;&nbsp;
                        <span ng-bind="UserId==0?'尚未登录':(GetRankingDetail.investPrice|number:'0')">10000000</span>{{UserId==0?'':'元'}}</p>
                    <img src="../../images/hd/ranking/ranking_01.jpg" alt="">
                </div>
                <div style="height:55.55rem;">
                    <div ng-repeat="obj in rankingDetailInfos track by $index" class="prize pull-left">
                        <p class='prize_top' ng-bind="obj.fullName?obj.fullName+'('+(obj.mobile|hideidcard)+')':'虚位以待'"></p>
                        <p class='{{obj.investPrice?"prize_center":"prize_false"}}'>
                            <span ng-bind="obj.investPrice?(obj.investPrice|number:'0'):'0'"></span> <span style="font-size:0.4267rem;color:#383838">元</span></p>
                        <p ng-if="hdtime&&hdtime!=2" class='prize_bottom'>活动进行中</p>
                        <p ng-if="!hdtime&&hdtime!=2" class='prize_bottom'>活动已结束</p>
                        <p ng-if="weibegin" class='prize_bottom'>敬请期待</p>
                    </div>
                </div>
                <div style="height:5.1627rem">
                    <img src="../../images/hd/ranking/bottom.jpg" alt="">
                    <p class="goprevious" ng-if="GetRankingDetail.serial">
                        <span ng-click="go('/hdhtml/hdgz')"></span>
                    </p>
                </div>
                <div style="height:{{deviceInfo.width/750*111-1}}px"></div>
            </div>
        </div>
        <div class="pos_bot" style="width:{{deviceInfo.width}}px" ng-if="hdtime">
            <img src="../../images/hd/ranking/ranking_13.png" alt="" ng-click="go('/main/list')">
        </div>
        <div class="pos_bot" style="width:{{deviceInfo.width}}px" ng-if="weibegin">
            <img src="../../images/hd/ranking/ranking_14.png" alt="">
        </div>
    </section>
</body>